<template>
	<xn-form-container
		width="100%"
		:closable="false"
		:get-container="false"
		:style="{ position: 'absolute' }"
		:body-style="{ background: '#f0f2f5' }"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
	>
		<template #title>
			<span>仓库盘点详情</span>
			<a-button style="float: right" @click="onClose">返回</a-button>
		</template>
		<a-card :bordered="false">
			<a-row :gutter="24" style="margin-bottom: 12px">
				<a-col :span="6">
					<a-row>
						<a-col :span="9">
							<span>盘点任务单号:</span>
						</a-col>
						<a-col :span="15">
							<span>{{ formData.code }}</span>
						</a-col>
					</a-row>
				</a-col>
				<a-col :span="6">
					<a-row>
						<a-col :span="7">
							<span>仓库名称:</span>
						</a-col>
						<a-col :span="17">
							<span>{{ formData.warehouseName }}</span>
						</a-col>
					</a-row>
				</a-col>
				<a-col :span="6">
					<a-row>
						<a-col :span="7">
							<span>仓库编号:</span>
						</a-col>
						<a-col :span="17">
							<span>{{ formData.warehouseNum }}</span>
						</a-col>
					</a-row>
				</a-col>
			</a-row>
			<a-row :gutter="24" style="margin-bottom: 12px">
				<a-col :span="6">
					<a-row>
						<a-col :span="7">
							<span>操作人:</span>
						</a-col>
						<a-col :span="17">
							<span>{{ bizTool.obtainCreateUser(formData) }}</span>
						</a-col>
					</a-row>
				</a-col>
				<a-col :span="6">
					<a-row>
						<a-col :span="7">
							<span>操作日期:</span>
						</a-col>
						<a-col :span="17">
							<span>{{ bizTool.obtainCreateTime(formData) }}</span>
						</a-col>
					</a-row>
				</a-col>
			</a-row>

			<a-row :gutter="24" style="margin-bottom: 12px">
				<a-col :span="6">
					<a-row style="color: red">
						<a-col :span="7">
							<span>审核状态:</span>
						</a-col>
						<a-col :span="17">
							<span>{{ formData.approveStatus }}</span>
						</a-col>
					</a-row>
				</a-col>
				<a-col :span="6" v-if="formData.approveUserName">
					<a-row>
						<a-col :span="7">
							<span>审核人:</span>
						</a-col>
						<a-col :span="17">
							<span>{{ bizTool.obtainApprover(formData) }}</span>
						</a-col>
					</a-row>
				</a-col>
				<a-col :span="6" v-if="formData.approveUserName">
					<a-row>
						<a-col :span="7">
							<span>审核时间:</span>
						</a-col>
						<a-col :span="17">
							<span>{{ bizTool.obtainApproverTime(formData) }}</span>
						</a-col>
					</a-row>
				</a-col>
				<a-col :span="6" v-if="formData.refuseReason">
					<a-row>
						<a-col :span="7">
							<span>拒绝理由:</span>
						</a-col>
						<a-col :span="17">
							<span>{{ formData.refuseReason }}</span>
						</a-col>
					</a-row>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="6">
					<a-row>
						<a-col :span="7">
							<span>备注:</span>
						</a-col>
						<a-col :span="17">
							<span>{{ formData.remark }}</span>
						</a-col>
					</a-row>
				</a-col>
			</a-row>
		</a-card>

		<a-row>
			<a-col :span="24">
				<a-row>
					<a-button class="childAddButton"> 商品明细 </a-button>
				</a-row>
				<a-table
					:pagination="false"
					:columns="goodsColumns"
					:data-source="formData.proWaresSheetDetailList"
					:scroll="{ x: 700 }"
				>
					<template #bodyCell="{ column, record }">
						<template v-if="column.dataIndex === 'remark'">
							<div class="editable-cell">
								<a-input disabled v-model:value="record.remark" />
							</div>
						</template>
						<template v-if="column.dataIndex === 'checkNum'">
							<div class="editable-cell">
								<a-input disabled v-model:value="record.checkNum" />
							</div>
						</template>
						<template v-if="column.dataIndex === 'checkNumChange'">
							<div class="editable-cell">
								<a-input disabled v-model:value="record.checkNumChange" />
							</div>
						</template>
						<template v-if="column.dataIndex === 'checkDifference'">
							<div class="editable-cell">
								<a-input disabled v-model:value="record.checkDifference" />
							</div>
						</template>
					</template>
				</a-table>
			</a-col>
		</a-row>
		<a-row style="margin-top: 50px" justify="center">
			<a-space>
				<a-button
					v-if="formData.approveStatus == bizTool.audit && hasPerm('TAKE_SHEET_APPROVED')"
					:loading="passLoading"
					type="primary"
					style="width: 100px; border-radius: 5px"
					@click="approval"
					>审核通过</a-button
				>
				<a-button
					v-if="formData.approveStatus == bizTool.audit && hasPerm('TAKE_SHEET_APPROVED')"
					:loading="rejectLoading"
					danger
					style="width: 100px; border-radius: 5px"
					@click="approvalRejection"
					>审核拒绝</a-button
				>
				<a-button v-if="hasPerm('TAKE_SHEET_PRINT')" type="primary" ghost style="width: 100px; border-radius: 5px"
					>打印</a-button
				>
				<a-button style="width: 100px; border-radius: 5px" @click="onClose">关闭</a-button>
			</a-space>
		</a-row>
		<pass-reject-form :visibleAttachment="false" ref="passRejectFormRef" @ok="passRejectFormOk" />
	</xn-form-container>
</template>

<script setup name="takeSheetInfo">
	import bizTool from '@/utils/bizTool'
	import stockTakingApi from '@/api/warehouse/stockTakingApi'
	import { Modal } from 'ant-design-vue'
	import PassRejectForm from '@/views/flw/task/todoTask/passRejectForm.vue'
	// 定义emit事件
	//PROCUREMENT_PARTNERS
	const emit = defineEmits({ successful: null })
	// 默认是关闭状态
	const visible = ref(false)
	const passLoading = ref(false)
	const rejectLoading = ref(false)
	const formData = ref({})
	const passRejectFormRef = ref()
	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		formData.value = { ...record }
		loadDetail(record)
	}

	const passRejectFormOk = (value) => {
		let refuseReason = value.comment
		rejectLoading.value = true
		stockTakingApi
			.approveRefuse({
				id: formData.value.id,
				refuseReason: refuseReason
			})
			.then(() => {
				visible.value = false
				emit('successful')
			})
			.catch(() => {})
			.finally(() => (rejectLoading.value = false))
	}

	const approval = () => {
		Modal.confirm({
			title: '提示信息',
			content: '是否执行审核通过操作？',
			maskClosable: false,
			okText: '确定',
			cancelText: '取消',
			onOk: () => {
				passLoading.value = true
				stockTakingApi
					.approvePass({
						id: formData.value.id
					})
					.then(() => {
						visible.value = false
						emit('successful')
					})
					.catch(() => {})
					.finally(() => (passLoading.value = false))
			},
			onCancel: () => {}
		})
	}

	const approvalRejection = () => {
		passRejectFormRef.value.onOpen('REJECT', true)
	}

	const loadDetail = (record) => {
		stockTakingApi
			.detail({
				id: record.id
			})
			.then((res) => {
				formData.value.proWaresSheetDetailList = res.proWaresSheetDetailList.map((it) => {
					if (it.proMaterial) {
						it['category'] = '物料'
						it['materialName'] = it['proMaterial'].name
						it['code'] = it['proMaterial']['code']
						it['waresPrice'] = it['proMaterial'].unitPrice
						it['unit'] = it['proMaterial'].unit
						it['spec'] = it['proMaterial'].spec
						it['key'] = it['materialId']
						it['unitPrice'] = it['materialId'].unitPrice
					} else {
						it['key'] = it['productId']
						it['category'] = '产品'
						it['productNo'] = it['productCode']
						it['product'] = it['productName']
					}
					return it
				})
			})
			.catch(() => {})
	}

	// 关闭抽屉
	const onClose = () => {
		visible.value = false
	}

	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})

	const goodsColumns = [
		{
			title: '分类',
			width: 100,
			dataIndex: 'category',
			align: 'center',
			ellipsis: true
		},

		{
			title: '编号',
			width: 100,
			dataIndex: 'code',
			align: 'center',
			ellipsis: true,
			customRender: ({ record }) => {
				return record.category == bizTool.productName ? record.productNo : record.code
			}
		},
		{
			title: '名称',
			width: 100,
			dataIndex: 'materialName',
			align: 'center',
			ellipsis: true,
			customRender: ({ record }) => {
				return record.category == bizTool.productName ? record.product : record.materialName
			}
		},

		{
			title: '单位',
			width: 100,
			dataIndex: 'unit',
			align: 'center',
			ellipsis: true,
			customRender: ({ record }) => {
				return record.category == bizTool.productName ? record.productUnit : record.unit
			}
		},
		{
			title: '型号',
			width: 100,
			dataIndex: 'spec',
			align: 'center',
			ellipsis: true,
			customRender: ({ record }) => {
				return record.category == bizTool.productName ? record.productSpec : record.spec
			}
		},
		{
			title: '库存数量',
			width: 100,
			dataIndex: 'waresNum',
			align: 'center',
			ellipsis: true
		},
		{
			title: '盘点数量',
			width: 100,
			dataIndex: 'checkNum',
			align: 'center'
		},
		{
			title: '修改后盘点数量',
			width: 150,
			dataIndex: 'checkNumChange',
			align: 'center'
		},
		{
			title: '盘点差异数量',
			width: 150,
			dataIndex: 'checkDifference',
			align: 'center'
		},
		{
			title: '备注',
			width: 130,
			dataIndex: 'remark',
			align: 'center'
		}
	]
</script>

<style scoped :type="less">
	.childAddButton {
		margin-bottom: 12px;
		margin-top: 12px;
	}
</style>
